<template>
    <div class="paymentDetail" id="paymentDetail">
        <h4>新增套餐</h4>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item size="mini" label="套餐名称">
                <el-input v-model="formInline.name" placeholder="套餐名称"></el-input>
            </el-form-item>
            <el-form-item size="mini" label="所属专业">
                <el-select v-model="formInline.professionales_id" placeholder="所属专业">
                    <el-option v-for="(v,i) in formInOpt" :key="i" :label="v.name" :value="v.id"></el-option>
                </el-select>
            </el-form-item>
        </el-form>

        <el-table :data="professList" border style="width: 100%">
            <el-table-column prop="name" label="名称" align="center"></el-table-column>
            <el-table-column prop="total_money" label="单价(元)" align="center">
                <template slot-scope="scope">
                    <el-input-number v-model="scope.row.total_money" controls-position="right" :min="0" :max="10000" placeholder="单价"></el-input-number>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" fixed="right">
                <template slot-scope="scope">
                    <el-button size="mini" plain @click="packageDel(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="btn-box">
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <el-button @click="goCencal">返回</el-button>
        </div>
    </div>
</template>

<script>
    import apis from '../apis/apis';
    export default {
        name: 'paymentDetail',
        data() {
            return {
                professList: [],
                professName: '套餐名称',
                years: '学年制',
                formInline: {
                    name: '',
                    professionales_id: '',
                    template_detail: 'template_detail'
                },
                editpayment: {},
                formInOpt: []
            };
        },
        mounted() {
            this.getPayment();
        },
        methods: {
            goCencal() {
                this.$router.go(-1);
            },
            paymentList() {
                console.info(this.professList);
                this.formInline.template_detail = this.professList.map(v => {
                    return {
                        charging_items_id: v.id,
                        money: v.total_money,
                        remark: v.name
                    }
                })
            },
            getPayment() {
                var self = this;
                /* 套餐列表 */
                apis.contApi.getProfessList().then(data => {
                    data.data.data.chargingItems.map(v => v.total_money = 0);
                    self.professList = data.data.data.chargingItems;
                    self.paymentList();
                }).catch(error => {
                    console.error(error);
                });

                apis.contApi.getProfessAll().then(data => {
                    self.formInOpt = data.data.data;
                }).catch(error => {
                    console.error(error);
                })
            },
            packageDel(inde, resp) {
                var self = this;
                if(self.professList.length > 0) {
                    self.professList.splice(inde, 1);
                    self.paymentList();
                }
            },
            onSubmit() {
                var self = this;
                self.paymentList();
                self.formInline.professionales_id = self.formInline.professionales_id.toString();
                apis.contApi.addProfessList(self.formInline).then((res) => {
                    this.$message(res.data.msg);
                    if(res.data.code == 0) {
                        self.goCencal();
                    }
                }).catch((error) => {
                    console.error(error);
                });
            }
        }
    };
</script>

<style scoped>
    .profess-List {
        width: 100%;
        border-collapse: collapse;
    }
    
    .profess-List th,
    .profess-List td {
        border: 1px solid #000;
    }
    
    form.el-form.demo-form-inline.el-form--inline {
        margin-top: 10px;
        display: flex;
        white-space: nowrap;
    }
    
    .btn-box {
        display: flex;
        justify-content: center;
        margin: 25px 0;
    }
</style>